<template>
    <div id="top">
        <div class="top-sou">
            <div class="tops">西安 ↓</div>
            <router-link to="/Search">
                <div class="topo" @click="tiao">
                    <button class="btsou"><span class="iconfont icon-quanbu"></span></button><input type="button" value="痛仰乐队" class="btkuang">
                </div>
            </router-link>
            <div class="topu"><span class="iconfont icon-quanbu"></span></div>
        </div>
        <div class="top-xuan">
            <div class="topxuan">
                <router-link to="/">
                    <li class="router" :class="routera==5?'router1':''" @click="fn(5)">精选</li>
                </router-link>
                <router-link to="/Drama">
                    <li class="router" :class="routera==6?'router1':''" @click="fn(6)">话剧音乐剧</li>
                </router-link>
                <li class="router" :class="routera==7?'router1':''" @click="fn(7)">展览休闲</li>
                <li class="router" :class="routera==8?'router1':''" @click="fn(8)">Livehouse</li>
                <li class="router" :class="routera==9?'router1':''" @click="fn(9)">音乐</li>
                <li class="router" :class="routera==10?'router1':''" @click="fn(10)">精选</li>
            </div>
        </div>
    </div>
</template>


<script>
import { mapState } from 'vuex';
export default {
    name:"Searchbox",
    computed:{
        ...mapState(['routera'])
    },
    methods:{
      fn(asd){
        this.$store.commit("fna",asd)
      },
      tiao(){}
    }
}
</script>

<style scoped>

#top{
    height: 0.68rem; 
}
.top-sou{
    height: 0.355rem;
    line-height: 0.355rem;
    font-size: 0.115rem;
    display: flex;
    justify-content: space-around;
    align-items:center;
}
.topo{
    height: 0.2rem;
    border-radius: 1.02rem 1.02rem 1.02rem 0.2rem;
    line-height: 0.2rem;
    overflow: hidden;
    background: -webkit-linear-gradient(left, #feefea , #f2f0fd);
}
.top-sou .topo input{
    height: 0.2rem;
    width: 1.8rem;
    background: none;
    color: #ccc;
}
.top-sou .topo button{
    background: none;
    border: none;
    outline: none;
}
.btsou{
    vertical-align : middle;
    width: 0.2rem;
    font-size: 0.1rem !important;
}
.top-xuan{
    height: 0.325rem;
    overflow-x:auto;
}
.topxuan{
    width: 120%;
    height: 0.325rem;
    display: flex;
    align-items:center;
    justify-content: space-around;
    font-size: 0.1rem;
    color: #9a9da4;
}
.top-xuan .topxuan li{
    padding-bottom: 0.02rem;
    /* border-bottom: 0.03rem solid #ff2969; */
}
.router{
  color: #9d9ea3;
  text-decoration: none;
}
.router1{
    color: hotpink;
    text-decoration: none;
}
</style>
